<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    .mui_comm_head{ padding: 0; line-height: 40px; height: 40px; vertical-align: middle; }
    .mui_comm_head .comm_title { padding-top: 2px; }
    .focus { height:40px; line-height:40px; vertical-align: middle; float: right; }
    .focus_btn{ font-size: 13px; padding: 0 15px; background: #1abf8a; display: inline-block; width: 70px; height: 30px; line-height: 30px; border-radius: 5px; }
    .focus_btn.on{ background: #999; }
</style>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/payDialog.css" />
<!--detail-content-->
<div class="detail-content">
    <div id="content-detail">
        <script type="text/html" id="tpl-content">
            <!--title-->
            <div class="title">
                <h2>{{resultList.title}}</h2>
                <%--<p>{{resultList.labelName}} {{formatTime resultList.create_time}}</p>--%>
                <div class="mui_comm_head">
                    <div class="comm_logo">
                        <img src="{{resultList.unit_img}}"/>
                    </div>
                    <div class="comm_title">
                        <a><h4>{{resultList.unit_name}}</h4></a>
                        <p>{{formatTime resultList.create_time}}</p>
                    </div>
                    <div class="focus">
                        <div class="focus_btn {{if resultList.focus == 1}}on{{/if}}" >
                            <a href="javascript:;" id="focus" style="color: #fff;">{{if typeof resultList.focus != 'undefined' && resultList.focus == 0}}已关注{{else}}+ 关注{{/if}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--/title-->
            <!--content-->
            <div class="content">
                <p></p>
                <img src="{{resultList.theme_img1}}" alt="" style="margin: 10px 0;" />
                {{if resultList.abstract_info}}
                <div style="background-color: #F1F1F1; color: #666; padding: .8rem; margin-bottom: 1rem;">
                    <p style="color: #666;">{{resultList.abstract_info}}</p>
                </div>
                {{/if}}
                <p>{{#resultList.content}}</p>
            </div>
            <!--/content-->
            <!--love-box-->
            <div class="love-box">
                <a href="javascript:;" class="btn-love" id="btnLike"><i></i><span>{{resultList.collect_num}}人喜欢</span></a>
            </div>
            <!--/love-box-->
            <!--comment-list-->
            <div class="comment-list" id="commentList">
                <div class="title">
                    <h2>热门评论</h2>
                </div>
                <div class="content">
                    <!--comment-list-row-->
                    {{include 'tpl-comment' resultList.comment}}
                    <!--/comment-list-row-->
                </div>
                <div class="more-box">
                    <a href="javascript:;" id="loadCommentMore">加载更多</a>
                </div>
            </div>
            <!--/comment-list-->
            </div>
            <!--/detail-content-->
            <!--detail-comment-area-->
            <div class="detail-comment-area">
                <div class="item-list">
                    <a class="item bnt-back"><i class="icon icon-back"></i></a>
                    <a class="item" id="commentWrite"><i class="icon icon-write"></i></a>
                    <a class="item" id="comment"><i class="icon icon-comment"></i><span class="number">{{resultList.comment_num}}</span></a>
                    <a class="item {{if resultList.collection == 1}}hover{{/if}}" id="commentStar"><i class="icon icon-star"></i></a>
                    <a class="item" id="commentFace" {{if resultList.user_motion}}disabled{{/if}}><i class="icon icon-face {{resultList.user_motion}}"></i></a>
                </div>
                <div class="face-list">
                    <a class="item bnt-back"></a>
                    <a class="item" data-icon="icon-anger"><i class="icon icon-anger"></i></a>
                    <a class="item" data-icon="icon-answer"><i class="icon icon-answer"></i></a>
                    <a class="item" data-icon="icon-cry"><i class="icon icon-cry"></i></a>
                    <a class="item" data-icon="icon-awkward"><i class="icon icon-awkward"></i></a>
                    <a class="item" data-icon="icon-smile"><i class="icon icon-smile"></i></a>
                    <a class="item" id="closeFace"><i class="icon icon-close"></i></a>
                </div>
                <form action="#" method="post" class="upload-comment">
                    <div class="btn-box">
                        <button type="button" class="btn-cancel">取消</button>
                        <button type="button" class="btn-submit">发布</button>
                    </div>
                    <textarea class="tta" rows="5" placeholder="请输入内容" id="inputComment"></textarea>
                </form>
                <div class="waterMark"></div>
            </div>
            <!--/detail-comment-area-->
        </script>
    </div>
</div>
<!-- 更多评论 -->
<script type="text/html" id="tpl-comment">
    {{each list as value i}}
    <div class="comment-list-row">
        <div class="item left">
            <div class="head" style="background-image: url('{{if value.head_url}}{{value.head_url}}{{/if}}'"></div>
        </div>
        <!--right-->
        <div class="item right">
            <div class="top-info">
                <a class="clickGood {{if value.is_up == 1}}hover{{/if}}" data-up="{{value.is_up}}" data-id="{{value.id}}">{{value.fabulous_num}}</a>
                <h3><span class="username">{{value.user_name}}</span><span>{{formatTime value.create_time}}</span></h3>
            </div>
            <div class="cont">
                <p>{{value.comment}}</p>
            </div>
            {{if value.reply}}
            <div class="reply">
                <p>小编：{{value.reply}}</p>
            </div>
            {{/if}}
        </div>
        <!--/right-->
    </div>
    {{/each}}
</script>
<!-- 付费资讯 -->
<div class="pay-dialog">
    <script type="text/html" id="tpl-payDetail">
        <form action="#" method="post" id="payForm">
            <header>
                <h1>付费阅读</h1>
            </header>
            <div class="content">
                <p>试读已结束，通过以下方式获取更多精彩<span style="color: red">注：单篇购买可享受单篇阅读永久阅读权，包月订阅可享受全部阅读一月阅读权</span></p>
                <div class="list">
                    <div class="radio"><input type="radio" name="rd" value="1" checked /><span class="alone">单篇购买(￥{{dealAmount resultList.money}})</span></div>
                    <div class="radio"><input type="radio" name="rd" value="2" /><span class="year">包月订阅(￥{{dealAmount resultList.month_charge}})</span></div>
                </div>
            </div>
            <footer>
                <button type="button" class="btn-pay-cancel">取消</button>
                <button type="button" class="btn-pay active" id="btnPay">立即支付</button>
            </footer>
        </form>
    </script>
</div>

<script>

    //加载事件
    function loadEvent(){
        //加载详情数据
        $.ajax({
            url: _basePath + "app/information/detail",
            data: {id: ${id} },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    var _html = template('tpl-content', data);
                    $("#content-detail").append(_html).find("section").css("width", "100%");
                }else{
                    mui.toast("获取热点详情出错");
                }
            }
        });

    }



    $(function(){
        loadEvent();
    });
</script>